<!-- created:2022/12/11 11:59 By AdinZ -->
<template>
  <div class="login">
    <div class="login-page-wrapper">
      <div class="login-bg" :style="{'background-image':`url(${require('@/assets/images/bg.png')})`}">
        <div class="login-bg-overlay">

        </div>
        <div class="login-bg-shape">
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
               viewBox="0 0 1440 120">
            <path d="M 0,36 C 144,53.6 432,123.2 720,124 C 1008,124.8 1296,56.8 1440,40L1440 140L0 140z"></path>
          </svg>
        </div>
      </div>
    </div>


    <div class="login-form-content">
      <div class="login-container">


        <div class="login-info">

        </div>
        <el-card class="login-card" style="width: 470px">
          <div class="login-card-box">


            <div class="title">
              <h3>您好,请登录</h3>
              <p class="info">请输入后台账号密码进行登录</p>
            </div>
            <el-form label-width="80px" size="large" autocomplete="none">
              <div class="input-form" style="padding-right: 40px;margin-top: 30px;">
                <el-form-item label="账号">
                  <el-input v-model="form.username" placeholder="请输入账号" autocomplete="off">
                    <template #prefix>
                      <el-icon>
                        <User/>
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input v-model="form.password" placeholder="请输入登录密码" type="password" show-password
                            autocomplete="off" @keydown="handlerKeydown">
                    <template #prefix>
                      <el-icon>
                        <Lock/>
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="form.remember" label="记住用户名" name="type"/>
                </el-form-item>
              </div>
              <div class="login-submit" style="">
                <el-button type="primary" style="width: 80%" @click="handleSubmit">立即登录</el-button>
              </div>

              <el-form-item style="margin-top: 50px;">
                版本号 {{ version }}
              </el-form-item>
            </el-form>
          </div>

        </el-card>


      </div>
    </div>


    <div class="login-footer">

    </div>
  </div>
</template>

<script>
export default {
  computed: {
    version() {
      return process.env.APP_VERSION;
    }
  }
}
</script>
<script setup>

import {useStore} from "vuex";
import {ref} from "vue";
import {useRouter} from "vue-router";

const store = useStore();
const router = useRouter();

const form = ref({
  username: localStorage.getItem('login-username') || '',
  password: '',
  remember: localStorage.getItem('login-remember') == 'true' ? true : false
})


const handleSubmit = () => {
  if (form.value.remember == true) {
    localStorage.setItem('login-username', form.value.username)
  }
  store.dispatch('user/login', form.value).then(() => {
    if (form.value.remember == true) {
      localStorage.setItem('login-username', form.value.username)
    } else localStorage.removeItem('login-username')
    localStorage.setItem('login-remember', form.value.remember + '')

    router.push('/')
  })
}

const handlerKeydown = (event) => {
  if(event.keyCode==13){
    handleSubmit()
  }
}

</script>

<style scoped lang="scss">
.login {
  height: 100vh;
  overflow: hidden;

  .login-page-wrapper {

    .login-bg {
      background-position: center;
      background-size: cover;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 50%;

      &-overlay {
        background: linear-gradient(to right, #364574, #405189);
        opacity: .2;
        position: absolute;
        height: 100%;
        width: 100%;
        right: 0;
        bottom: 0;
        left: 0;
        top: 0;
      }

      &-shape {
        position: absolute;
        bottom: -4px;
        right: 0;
        left: 0;
        z-index: 1;
        pointer-events: none;

        svg {
          fill: #fff;
        }
      }
    }

  }

  .login-form-content {
    position: absolute;
    z-index: 2;
    width: 100%;

    .login-info {
      height: 300px;
      text-align: center;
      margin: 15px auto;
    }

    .login-card {
      width: 470px;
      margin: 0 auto;
      text-align: center;
    }

    .login-card-box {
      padding: 30px 0;
    }
  }

  .login-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    height: 80px;
    background-color: var(--html-dark-bg);
  }
}

.dark {
  .login {
    background-color: var(--html-dark-bg);

    .login-footer {
      background-color: rgba(42, 46, 51, 0.5);
    }
  }

  .login-bg {
    &-shape {
      svg {
        fill: var(--html-dark-bg) !important;
      }
    }
  }
}
</style>
